<template>
	<div class="container">
		<div class="content">
			<div class="left">账户资产</div>
			<div class="right">
				<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item>首页</el-breadcrumb-item>
					<el-breadcrumb-item>账户管理</el-breadcrumb-item>
					<el-breadcrumb-item><a href="#">账户资产</a></el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<hr class="margin-h">
		<div class="balance">
			<div class="cash">
				<span>现金账户可用余额：</span>
				<span>$2,5300.00</span>
				<router-link to="#">收支明细</router-link>
				<span>在途：</span>
				<span>$2,5300.00</span>
			</div>
			<hr class="margin-v">
			<div class="pay">
				<span>付款专户可用余额：</span>
				<span>$8,4400.00</span>
				<router-link to="#">代发转入</router-link>
				<router-link to="#">提前结算</router-link>
			</div>
			<hr class="margin-v">
			<div class="message">
				<el-form :label-position="labelPosition" label-width="100px">
					<el-form-item label="商户号:">
						<el-form-item>900000000026482</el-form-item>
					</el-form-item>
					<el-form-item label="线下商户号:">
						<el-form-item>82384261726351726</el-form-item>
					</el-form-item>
					<el-form-item label="商户名称:">
						<el-form-item>STG2健康卡测试商户1</el-form-item>
					</el-form-item>
					<el-form-item label="提现银行:">
						<el-form-item>中国建设银行</el-form-item>
					</el-form-item>
					<el-form-item label="提现账户:">
						<el-form-item>90000******26482</el-form-item>
					</el-form-item>
					<el-form-item label="币种:">
						<el-form-item>人民币</el-form-item>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="trade">
			<div class="today">
				<div>当天收款信息</div>
				<div class="more">更多>></div>
			</div>
			<el-table :data="tableData" border>
				<el-table-column prop="date" label="创建时间">
				</el-table-column>
				<el-table-column prop="member" label="壹钱包交易号 | 商户订单号">
				</el-table-column>
				<el-table-column prop="type" label="交易类型">
				</el-table-column>
				<el-table-column prop="money" label="金额(元)">
				</el-table-column>
				<el-table-column prop="fee" label="交易手续费(元)">
				</el-table-column>
				<el-table-column prop="tstatus" label="交易状态">
				</el-table-column>
				<el-table-column prop="fstatus" label="资金状态">
				</el-table-column>
				<el-table-column label="操作">
					<template>
						<el-button type="text" size="small">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition: 'right',
				tableData: [{
						date: '09:05',
						member: '交易号:12345*****78362,订单号: 2013293827182 ',
						type: '线上退款',
						money: '0.01',
						fee: '0.00',
						tstatus: '成功',
						fstatus: '在途',
					},
					{
						date: '09:05',
						member: '交易号:12345*****78362订单号:2013293827182',
						type: '即时退款',
						money: '1.00',
						fee: '0.00',
						tstatus: '成功',
						fstatus: '在途',
					},
				]
			};
		}
	}
</script>

<style scoped="scoped">
	.more {
		color: #0088cc;
		font-size: 14px;
	}

	.today {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 17px;
		margin: 25px 20px;
		padding-left: 10px;
	}

	.message {
		margin-top: 23px;
		margin-left: 70px;
	}

	span {
		display: inline-block;
	}

	a {
		display: inline-block;
	}

	.container {
		width: 100%;
	}

	.content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 17px;
		margin: 25px 20px;
		padding-left: 10px;
		border-left: 1px solid #0075D2;
	}

	.margin-h {
		margin-left: 20px;
		margin-right: 20px;
		border-bottom: 1px solid #ddd;
	}

	.balance {
		height: 420px;
		border: 1px solid #dddddd;
		margin: 25px 20px;
	}

	.cash {
		margin: 35px 20px;

	}

	.cash>*,
	.pay>* {
		vertical-align: middle;
	}

	.cash a {
		color: #0088cc;
		font-size: 12px;
		margin-right: 85px;
	}

	.cash span:nth-of-type(1),
	.pay span:nth-of-type(1) {
		color: #333333;
		font-size: 13px;
		margin-right: 14px;
	}

	.cash span:nth-of-type(2),
	.pay span:nth-of-type(2) {
		color: #f22e48;
		font-size: 25px;
		margin-right: 13px;
	}

	.cash span:nth-of-type(3) {
		color: #333333;
		font-size: 13px;
		margin-right: 12px;
	}

	.cash span:nth-of-type(4) {
		color: #999999;
		font-size: 18px;
	}

	.pay {
		margin: 35px 20px;
	}

	.pay a:nth-of-type(1) {
		color: #0088cc;
		font-size: 12px;
		margin-right: 13px;
	}

	.pay a:nth-of-type(2) {
		color: #0088cc;
		font-size: 12px;
	}

	.right a {
		font-weight: 700 !important;
	}

	hr {
		margin: 0;
		padding: 0;
		border: none;
		height: 0;
	}

	.margin-v {
		border-bottom: 1px dotted #ddd;
		margin: 0 20px;
	}
</style>
<style>
	.el-breadcrumb__inner {
		color: #666666 !important;
	}

	.el-breadcrumb {
		font-size: 12px !important;
	}

	.el-form-item {
		margin-bottom: 0 !important;
	}

	.el-form-item__label,
	.el-form-item__content {
		line-height: 28px !important;
		color: #333333 !important;
		font-size: 13px !important;
	}

	.el-table {
		margin: 0 20px;
		width: auto !important;
		font-size: 12px !important;
	}

	.el-table .el-table__cell {
		text-align: center !important;
	}

	.el-table .el-table__cell {
		width: auto !important;
	}

	.el-table thead {
		color: #333333 !important;
	}

	th {
		font-weight: normal;
	}
</style>
